<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
				<el-tag v-else>禁用</el-tag>
			</template>

			<template #slot-togrant>
				<a
					class="togrant"
					target="_blank"
					href="https://oauth.taobao.com/authorize?response_type=code&client_id=28187829&redirect_uri=http%3A%2F%2Ftools-api.daihuo.com%2Fapi%2Ftool%2Ftaobao%2Fpageauthorizenew%3FuserId%3D12&state=&view=web"
					>去授权</a
				>
			</template>

			<template #table-column-sessionStatus="{scope}">
				<el-tag v-if="scope.row.sessionStatus == 1" type="success">已授权</el-tag>
				<el-tag v-else>未授权</el-tag>
			</template>

			<template #table-column-bybtStatus="{scope}">
				<el-tag v-if="scope.row.bybtStatus == 1" type="success">启用</el-tag>
				<el-tag v-else>禁用</el-tag>
			</template>

			<template #table-column-expireTime="{scope}">
				<span v-if="scope.row.expireTime == null">--</span>
				<span v-else>{{ scope.row.expireTime }}</span>
			</template>

			<template #slot-filter>
				<div class="filter-bar">
					<span>状态</span>

					<el-select
						v-model="selects.status"
						size="mini"
						clearable
						@change="
							val => {
								refresh({
									status: val
								});
							}
						"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="0"></el-option>
					</el-select>
				</div>

				<div class="filter-bar">
					<span>是否授权</span>

					<el-select
						v-model="selects.sessionStatus"
						size="mini"
						clearable
						@change="
							val => {
								refresh({
									sessionStatus: val
								});
							}
						"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="已授权" value="1"></el-option>
						<el-option label="未授权" value="0"></el-option>
					</el-select>
				</div>

				<div class="filter-bar">
					<span>是否百亿补贴</span>

					<el-select
						v-model="selects.bybtStatus"
						size="mini"
						clearable
						@change="
							val => {
								refresh({
									bybtStatus: val
								});
							}
						"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="启用" value="1"></el-option>
						<el-option label="禁用" value="0"></el-option>
					</el-select>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import stores from '@/utils/store';

export default {
	data() {
		return {
			crud: null,
			options: {
				staff: []
			},
			selects: {}
		};
	},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.goodsMenagement.getTljAccountList)
				.set('table', {
					columns: [
						{
							type: 'index',
							label: '序号',
							align: 'center',
							width: '60'
						},
						{
							label: 'AppKey',
							prop: 'appkey',
							align: 'center'
						},
						{
							label: 'AppSecret',
							prop: 'appsecret',
							align: 'center',
							width: 300
						},
						{
							label: 'sessionKey',
							prop: 'sessionKey',
							align: 'center',
							width: 300
						},
						{
							label: '账号名称',
							prop: 'account',
							align: 'center'
						},
						{
							label: '渠道Id',
							prop: 'relationId',
							align: 'center',
							emptyText: '--',
							width: 160
						},
						{
							label: '登记时间',
							prop: 'createTime',
							align: 'center',
							width: 160
						},
						{
							label: '过期时间',
							prop: 'expireTime',
							align: 'center',
							width: 160
						},
						{
							label: '备注',
							prop: 'remark',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							width: '80px',
							align: 'center'
						},
						{
							label: '是否授权',
							prop: 'sessionStatus',
							width: '110px',
							align: 'center'
						},
						{
							label: '是否百亿补贴',
							prop: 'bybtStatus',
							width: '110px',
							align: 'center'
						}
					],
					op: {
						layout: ['slot-togrant', 'edit', 'delete']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '100px',
						center: true,
						width: '600px',
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: 'AppKey',
							prop: 'appkey',
							span: 22,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入AppKey'
								}
							},
							rules: {
								required: true,
								message: '请输入AppKey'
							}
						},
						{
							label: 'AppSecret',
							prop: 'appsecret',
							span: 22,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入AppSecret'
								}
							},
							rules: {
								required: true,
								message: '请输入请输入AppSecret'
							}
						},
						{
							label: 'sessionKey',
							prop: 'sessionKey',
							span: 22,
							hidden: true,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入sessionKey'
								}
							}
						},
						{
							label: '账户名称',
							prop: 'account',
							span: 22,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入账户名称'
								}
							},
							rules: {
								required: true,
								message: '请输入账户名称'
							}
						},
						{
							label: '渠道Id',
							prop: 'relationId',
							span: 22,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入渠道Id'
								}
							}
						},
						{
							label: '备注',
							prop: 'remark',
							span: 22,
							component: {
								name: 'el-input'
							}
						},
						{
							label: '状态',
							prop: 'status',
							value: 1,
							component: {
								name: 'el-radio-group',

								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						},
						{
							label: '百亿补贴状态',
							prop: 'bybtStatus',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '启用',
										value: 1
									},
									{
										label: '禁用',
										value: 0
									}
								]
							}
						}
					]
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'slot-filter', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('open', isEdit => {
					app.hiddenItem('sessionKey', !isEdit);
				})
				.on('submit', async (isEdit, data, { next }) => {
					if (isEdit) {
						next({
							...data,
							app: stores.get('platForm') || 'yzf'
						});
					} else {
						next({
							...data,
							app: stores.get('platForm') || 'yzf'
						});
					}
				})
				.done();

			app.refresh();
		},

		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>

<style lang="stylus">
.togrant{
	margin-right:1em;
	color:#409EFF;
}

.filter-bar {
	margin-left 10px

	& > span {
		font-size: 12px;
		margin-right: 10px;
	}
}
</style>
